<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #output { height:auto%; padding-left:20px; margin-left:20px; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    
    <link rel="stylesheet" href="autocomplete.css" type="text/css" media="screen">
	
    <script src="dimensions.js" type="text/javascript"></script>
    <script src="autocomplete.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        $(function(){
            setAutoComplete("cods", "results", "autocomplete.php?part=");
        });
    </script>
    
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>


	<script src="script/jquery-1.4.min.js"></script>
    <script src="script/jquery.js"></script>

<script>







  var loca = "";

 function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('output'),
          mapOptions);

		  var drawingManager = new google.maps.drawing.DrawingManager({
		  drawingMode: google.maps.drawing.OverlayType.POLYGON,
		  drawingControl: true,
		  drawingControlOptions: {
			position: google.maps.ControlPosition.TOP_CENTER,
			drawingModes: [
			  google.maps.drawing.OverlayType.MARKER
			 //google.maps.drawing.OverlayType.CIRCLE,
			  //google.maps.drawing.OverlayType.POLYGON,
			 //google.maps.drawing.OverlayType.POLYLINE,
			// google.maps.drawing.OverlayType.RECTANGLE
			]
		  },
		  polygonOptions: {
			fillColor: '#1E90FF',
			fillOpacity: 0.4,
			strokeWeight: 2,
			clickable: true,
			editable: true,
			zIndex: 1
		  }
		});
		
		
		google.maps.event.addListener(drawingManager, 'markercomplete', function(e) {
			loca = e.getPosition();
				//alert(loca)
							
			
				var ajaxRequest; 
				ajaxRequest = new XMLHttpRequest();
				
			
				ajaxRequest.onreadystatechange = function(){
					if(ajaxRequest.readyState == 4){
						
						if(ajaxRequest.responseText != "Pointer out of bound!"){
						
							var contentString = ajaxRequest.responseText+"<div> Location "+ loca +"</div>";
				
				
							var infowindow = new google.maps.InfoWindow({
								content: contentString
								});
							
							var marker = new google.maps.Marker({
								position: loca,
								map: map,
								title:"Uluru (Ayers Rock)"
								});
							
							google.maps.event.addListener(marker, 'click', function() {
							 	 infowindow.open(map,marker);
								});
							
						}else
						
						{alert(ajaxRequest.responseText)}
					}
				}
				
				
				
				var queryString = "?codes="+loca;
				//alert(queryString)
				ajaxRequest.open("GET", "cal.php" + queryString, true);
				ajaxRequest.send(null);
				
				
				
				
			});
		
		
		
					
		drawingManager.setMap(map);
		
	}
	

function check(){
	
	var bcode = $('#bcode').val();
	var zip = $('#zipCode').html();
	var sec = $('#sectorCode').html();
	
	
	if(bcode != ""){
		$('#saved').html('Loading.....')
		var ajaxRequest; 
		ajaxRequest = new XMLHttpRequest();
		
	
		ajaxRequest.onreadystatechange = function(){
			if(ajaxRequest.readyState == 4){
				
				if(ajaxRequest.responseText != 1){
					$('#saved').html(ajaxRequest.responseText)
				}else{
					alert('Try a different building code!');
					$('#saved').html('<input type="button" value="Save" id="" onclick="check()"/>')	
				}
					
			}
		}
		
		
		var queryString = "?loc="+loca+"&zip="+zip+"&sec="+sec+"&bcode="+bcode;
		//alert(queryString)
		ajaxRequest.open("GET", "save.php" + queryString, true);
		ajaxRequest.send(null); 
	}
	
	else{alert('Missing Building Code!')}
}



function loadMap(){
	
  	
  		var id = $('#cods').val();	
		if(id != ""){
			var ajaxRequest; 
			ajaxRequest = new XMLHttpRequest();
			
			$('#loader').html('Loading.....')
		
			ajaxRequest.onreadystatechange = function(){
				if(ajaxRequest.readyState == 4){
					
					if(ajaxRequest.responseText != 1){	
						
					//alert(ajaxRequest.responseText);	
						$('#loader').html('')
						var c = ajaxRequest.responseText;
							c = c.split(",");
							lat = c[0];
							lng = c[1];
							
						  var myLatlng = new google.maps.LatLng(lat,lng);
						  var mapOptions = {
							zoom: 8,
							center:  new google.maps.LatLng(-34.397, 150.644),
							mapTypeId: google.maps.MapTypeId.ROADMAP
						  }
						  var map = new google.maps.Map(document.getElementById("output"), mapOptions);
						
						  var marker = new google.maps.Marker({
							  position: myLatlng,
							  map: map,
							  title:"Hello World!"
						  });
						  
						  $('#adder').show();
							
					}
				}
			}
			
		
		
		var queryString = "?id="+id;
		//alert(queryString)
		ajaxRequest.open("GET", "returnID.php" + queryString, true);
		ajaxRequest.send(null); 
		
		}
		else{alert('Enter Code To Search!')}

 
}

function compl(data){
	
	$('#com').show();
	var ajaxRequest; 
		ajaxRequest = new XMLHttpRequest();
		
	
		ajaxRequest.onreadystatechange = function(){
			if(ajaxRequest.readyState == 4){
				
					$('#com').html(ajaxRequest.responseText)
			}
		}
		
		
		var queryString = "?data="+data;
		//alert(queryString)
		ajaxRequest.open("GET", "autoCom.php" + queryString, true);
		ajaxRequest.send(null); 
}


function loadData(id){
		$('#com').hide();
		var ajaxRequest; 
		ajaxRequest = new XMLHttpRequest();
		
	
		ajaxRequest.onreadystatechange = function(){
			if(ajaxRequest.readyState == 4){
					//alert(ajaxRequest.responseText)
					$('#cods').val(ajaxRequest.responseText)
			}
		}
		
		
		var queryString = "?id="+id;
		//alert(queryString)
		ajaxRequest.open("GET", "loadData.php" + queryString, true);
		ajaxRequest.send(null); 
}
function enterKey(e){
	
	if(e.keyCode == 13){
		
		$('#result').hide();
	if (!$("#cods").val()) {
		$('#result').show();
		return false;
	}	
	var dataString = 'address='+ $("#cods").val();
		
	$.ajax({
      type: "GET",
      url: "result.php",
      data: dataString,
      success: function(response) {
        //$('#start').hide();
		$('#output').html(response)
		.hide()
        .fadeIn(1000, function() {
        });
      }
    });
    
	return false;
	
		
		//loadMap();
		}
}
	

</script>
</head>

<body onload="initialize()">
<!--<body>-->
<font id="auto">

Example Search: (Doubleview WA, 6018)
<br>
Example start pharse1: Doubl....
<br>
Example start pharse2: WA....
<br>
Example start pharse3: 6018...

<br>
Search: <input type="text" size="60" id="cods" name="cods" onKeyDown="enterKey(event)"/>
</font>
<input type="button" value="Search" id="button" name="button" class="button"> <div id="loader"></div>

<br><br/>
<div id="output" class="output"></div>

</body>
</html>